<template>
	<div class="image-file" :class="{ selected: modelValue, active: active }" @click="emits('click')">
		<div class="box box-1 flex-center">
			<el-image
				v-if="data.isImage"
				class="image"
				:src="data.imageReferencePath"
				fit="contain"
				:preview-src-list="[data.imageReferencePath as string]" />
			<i class="not-image iconfont icon-tupian" v-else :title="data.filename + '不是图片'"></i>
		</div>
		<div class="box box-2">
			<span class="filename beyond-hiding" :title="data.fullPath">{{ data.filename }}</span>
		</div>
		<div class="box box-3 box-icon flex-center" v-if="data.exists">
			<div class="reference-state" :class="[referenceState.class]" :title="referenceState.title"></div>
		</div>
		<div class="box box-4 box-icon flex-center" v-if="data.exists">
			<el-icon title="在文件夹内查看" @click="viewWithinFolder(data.fullPath)"><Folder /></el-icon>
		</div>
		<div class="box box-5 box-icon flex-center" v-if="data.exists">
			<el-icon v-if="!data.isMdReference" title="删除此文件" @click="emits('delete')"><Delete /></el-icon>
		</div>
		<div class="box box-6 flex-center" v-if="!data.exists">
			<span>文件不存在</span>
		</div>
	</div>
</template>

<script setup lang="ts">
import { CitationInfoItem } from '@p/main-windowObject';
import { Folder, Delete } from '@element-plus/icons-vue';
import { API } from '@v/utils/API';

interface PropsType {
	data: CitationInfoItem;
	modelValue?: boolean;
	active?: boolean;
	rootReferencePath?: string;
}

const props = defineProps<PropsType>();

const emits = defineEmits(['click', 'delete']);

const referenceState = {
	title: '',
	class: '',
};

if (props.data.isMdReference) {
	if (props.rootReferencePath && props.rootReferencePath !== props.data.mdReferencePath) {
		referenceState.title = `未在本文档引用，而在 "${props.data.mdReferencePath}" 中引用`;
		referenceState.class = 'yellow';
	} else {
		referenceState.title = `在 "${props.data.mdReferencePath}" 中引用`;
		referenceState.class = 'green';
	}
} else {
	referenceState.title = '未在文档中引用';
	referenceState.class = 'red';
}

// 在文件夹查看
function viewWithinFolder(path: string) {
	API.send('show-path', path);
}
</script>

<style scoped lang="scss">
.image-file {
	height: 32px;
	display: flex;
	&:hover {
		background-color: var(--mouse-hover-bg-color-2);
	}
	&.selected {
		background-color: rgba(64, 158, 255, 20%);
	}
	&.active {
		box-shadow: inset 0 0 0 1px var(--theme-main-color);
	}
	& > .box-icon {
		width: 30px;
	}
	& > .box {
		height: 100%;
	}
	.box-1 {
		width: 32px;
		margin-left: 32px;
		.image {
			width: 24px;
			height: 24px;
		}
		.image:hover {
			box-shadow: 0 0 0 0.5px var(--theme-main-color);
		}
		.not-image {
			color: var(--theme-danger-color);
			font-size: 18px;
		}
	}
	.box-2 {
		width: 300px;
		display: flex;
		align-items: center;
		.filename {
			margin-left: 4px;
			font-size: 13px;
		}
	}
	.box-3 {
		.reference-state {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background-color: var(--bg-color);
			&.red {
				--bg-color: var(--theme-danger-color);
			}
			&.green {
				--bg-color: var(--theme-success-color);
			}
			&.yellow {
				--bg-color: var(--theme-warning-color);
			}
		}
	}
	.box-4 {
		:deep(.el-icon:hover) {
			color: var(--theme-main-color);
		}
	}
	.box-5 {
		:deep(.el-icon:hover) {
			color: var(--theme-danger-color);
		}
	}
	.box-6 {
		font-size: 14px;
		color: var(--theme-danger-color);
	}
}
</style>
